<template>
  <div class="flex flex-col gap-4 px-4">
    <!-- 分类切换标签 -->
    <u-tabs :list="state.classification" :current="tabsCurrent" @change="tabsChange" :is-scroll="true" keyName="name" lineColor="#068DCA"></u-tabs>
    <s-empty v-if="state.data.length === 0" text="暂无列表" icon="/static/collect-empty.png" />

    <view class="grid grid-cols-2 gap-4">
      <view v-for="(i, k) in state.data" class="flex overflow-hidden flex-col col-span-1 bg-white rounded-lg" :key="k" @click="toDetail(i.id)">
        <view style="aspect-ratio: 1; width: 100%; background-color: rgb(249, 250, 251)">
          <!-- 使用uni-app推荐的图片加载方式 -->
          <image
            :src="i.image"
            mode="aspectFill"
            :lazy-load="true"
            style="width: 100%; height: 100%"
            @error="(err) => console.log('图片加载失败:', err)"
          />
        </view>
        <view class="flex flex-col gap-2 p-2">
          <view class="text-[#333333] line-clamp-1 text-[.875rem]">{{ i.title }}</view>
          <view class="text-[#333333] text-[.75rem] line-clamp-1">{{ i.subtitle[0] }}</view>
          <view class="text-[#333333] text-[.75rem] line-clamp-1">{{ i.subtitle[1] }}</view>
          <view class="text-[#333333] text-[.75rem] line-clamp-1">{{ i.subtitle[2] }}</view>
        </view>
      </view>
    </view>
  </div>
</template>

<script setup>
  import sheep from '@/sheep';

  const state = ref({
    data: [],
    classification: [],
    id: '',
    keyword: '',
    page: 1,
  });
  uni.$on('search', (keyword) => {
    state.value.keyword = keyword;
    state.value.page = 1;
    state.value.data = [];

    getList();
  });
  onReachBottom(() => {
    state.value.page++;
    getList();
  });

  // 当前选中的标签索引
  const tabsCurrent = ref(0);

  // 标签切换事件
  function tabsChange(index) {
    state.value.data = [];
    state.value.page = 1;
    console.log('🚀 ~ tabsChange ~ index:', index);
    // 将传入的index转换为数字类型
    const currentIndex = Number(index.index);
    console.log('🚀 ~ tabsChange ~ index:', currentIndex);
    tabsCurrent.value = currentIndex;
    state.value.id = state.value.classification[currentIndex].id;
    // 切换分类后获取新数据
    getList();
  }

  articleType();
  function articleType() {
    sheep.$api.yy
      .articleType({
        yy: 1,
      })
      .then((res) => {
        console.log('🚀 ~ articleType ~ res:', res);
        if (res.data && res.data.length > 0) {
          state.value.classification = res.data;
          state.value.id = res.data[0].id;
          // 初始化选中第一个分类
          tabsCurrent.value = 0;
          getList();
        }
      });
  }

  function getList() {
    // 显示加载提示
    uni.showLoading({
      title: '加载中',
    });

    sheep.$api.yy
      .articleList({
        page: 1,
        type_id: state.value.id,
        yy: 1,
        keyword: state.value.keyword,
        page: state.value.page,
      })
      .then((res) => {
        console.log('🚀 ~ getList ~ res:', res);
        if (res.code === 1) {
          state.value.data = [...state.value.data, ...res.data.data];
        }
        // 隐藏加载提示
        uni.hideLoading();
      })
      .catch(() => {
        // 请求失败也隐藏加载提示
        uni.hideLoading();
      });
  }

  function toDetail(id) {
    uni.navigateTo({
      url: '/pages/yy/articleDetail?id=' + id,
    });
  }
</script>

<style lang="scss" scoped>
  .tabs-container {
    // background-color: #ffffff;
    border-radius: 8px;
    padding: 4px 0;
    margin-bottom: 8px;
  }
</style>
